<template>
    <div class="error-page">
        <div class="error-container">
            <div class="error-code">{{ errorCode }}</div>
            <div class="error-title">{{ errorTitle }}</div>
            <div class="error-message">{{ errorMessage }}</div>
            <div class="error-actions">
                <el-button type="primary" @click="goHome">返回首页</el-button>
                <el-button @click="goBack">返回上一页</el-button>
                <el-button v-if="showRefresh" type="info" @click="refresh">刷新页面</el-button>
            </div>
            <div class="error-illustration">
                <svg v-if="errorType === 'client'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"
                    class="error-svg">
                    <path d="M769.4,454.9c-5.3,9.2-13.5,16.2-23.5,19.7c-40.5,14.7-81,29.5-121.4,44.2c-20.7,7.5-41.4,15.1-62.1,22.6
          c-23.2,8.4-51.5,1.8-68.8-15.5L648.8,237.5c17.3-17.3,45.6-23.9,68.8-15.5c41.2,15,82.4,30,123.6,45.1
          c20.1,7.3,32.8,27.5,29.3,48.8C865.9,356.7,817.7,405.8,769.4,454.9z" fill="#f2f2f2" />
                    <path d="M121.4,454.9c5.3,9.2,13.5,16.2,23.5,19.7c40.5,14.7,81,29.5,121.4,44.2c20.7,7.5,41.4,15.1,62.1,22.6
          c23.2,8.4,51.5,1.8,68.8-15.5L242,237.5c-17.3-17.3-45.6-23.9-68.8-15.5c-41.2,15-82.4,30-123.6,45.1
          c-20.1,7.3-32.8,27.5-29.3,48.8C24.9,356.7,73.1,405.8,121.4,454.9z" fill="#f2f2f2" />
                    <circle cx="400" cy="400" r="200" fill="#f5f5f5" />
                    <path d="M340 300H270V370H340V300Z" fill="#409EFF" />
                    <path d="M520 300H450V370H520V300Z" fill="#409EFF" />
                    <path
                        d="M330 470C330 452.3 344.3 438 362 438H428C445.7 438 460 452.3 460 470V470C460 470 428 490 395 470C362 450 330 470 330 470V470Z"
                        fill="#409EFF" />
                    <path d="M310 290L255 175 265 165 325 280 310 290Z" fill="#409EFF" />
                    <path d="M490 290L545 175 535 165 475 280 490 290Z" fill="#409EFF" />
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" class="error-svg">
                    <path d="M769.4,454.9c-5.3,9.2-13.5,16.2-23.5,19.7c-40.5,14.7-81,29.5-121.4,44.2c-20.7,7.5-41.4,15.1-62.1,22.6
          c-23.2,8.4-51.5,1.8-68.8-15.5L648.8,237.5c17.3-17.3,45.6-23.9,68.8-15.5c41.2,15,82.4,30,123.6,45.1
          c20.1,7.3,32.8,27.5,29.3,48.8C865.9,356.7,817.7,405.8,769.4,454.9z" fill="#f2f2f2" />
                    <path d="M121.4,454.9c5.3,9.2,13.5,16.2,23.5,19.7c40.5,14.7,81,29.5,121.4,44.2c20.7,7.5,41.4,15.1,62.1,22.6
          c23.2,8.4,51.5,1.8,68.8-15.5L242,237.5c-17.3-17.3-45.6-23.9-68.8-15.5c-41.2,15-82.4,30-123.6,45.1
          c-20.1,7.3-32.8,27.5-29.3,48.8C24.9,356.7,73.1,405.8,121.4,454.9z" fill="#f2f2f2" />
                    <circle cx="400" cy="400" r="200" fill="#f5f5f5" />
                    <path
                        d="M400 300C400 300 375 330 350 330C325 330 300 300 300 300C300 300 325 270 350 270C375 270 400 300 400 300Z"
                        fill="#e74c3c" />
                    <path
                        d="M500 300C500 300 475 330 450 330C425 330 400 300 400 300C400 300 425 270 450 270C475 270 500 300 500 300Z"
                        fill="#e74c3c" />
                    <path d="M330 370H470V390H330V370Z" fill="#e74c3c" />
                    <circle cx="350" cy="300" r="20" fill="#fff" />
                    <circle cx="450" cy="300" r="20" fill="#fff" />
                    <circle cx="350" cy="300" r="10" fill="#333" />
                    <circle cx="450" cy="300" r="10" fill="#333" />
                    <path
                        d="M400 430C430 430 460 460 460 460C460 460 400 470 400 470C400 470 340 460 340 460C340 460 370 430 400 430Z"
                        fill="#e74c3c" />
                    <path d="M294 190L310 175 384 240 375 250 294 190Z" fill="#e74c3c" />
                    <path d="M506 190L490 175 416 240 425 250 506 190Z" fill="#e74c3c" />
                </svg>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();

// 根据路由参数或默认值确定错误码
const errorCode = computed(() => route.params.code || '404');

// 基于错误码确定错误类型
const errorType = computed(() => {
    const code = parseInt(errorCode.value);
    return code >= 500 ? 'server' : 'client';
});

// 错误标题
const errorTitle = computed(() => {
    const code = parseInt(errorCode.value);
    if (code === 404) return '页面不存在';
    if (code === 403) return '访问被拒绝';
    if (code === 500) return '服务器错误';
    if (code === 503) return '服务不可用';
    return '发生错误';
});

// 错误消息
const errorMessage = computed(() => {
    const code = parseInt(errorCode.value);
    if (code === 404) return '抱歉，您访问的页面不存在或已被移除';
    if (code === 403) return '抱歉，您没有权限访问此页面';
    if (code === 500) return '抱歉，服务器出现了故障，请稍后再试';
    if (code === 503) return '抱歉，服务暂时不可用，请稍后再试';
    return '抱歉，发生了未知错误，请稍后再试';
});

// 是否显示刷新按钮
const showRefresh = computed(() => {
    return errorType.value === 'server';
});

const goHome = () => {
    router.push('/');
};

const goBack = () => {
    router.go(-1);
};

const refresh = () => {
    window.location.reload();
};
</script>

<style scoped>
.error-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    padding: 20px;
}

.error-container {
    max-width: 800px;
    text-align: center;
    padding: 40px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.error-code {
    font-size: 120px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

.error-code {
    color: v-bind('errorType === "server" ? "#e74c3c" : "#409EFF"');
}

.error-title {
    font-size: 32px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
}

.error-message {
    font-size: 18px;
    color: #606266;
    margin-bottom: 30px;
}

.error-actions {
    margin-bottom: 40px;
}

.error-actions .el-button {
    margin: 0 10px;
    padding: 12px 24px;
    font-size: 16px;
}

.error-illustration {
    max-width: 400px;
    margin: 0 auto;
}

.error-svg {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .error-code {
        font-size: 80px;
    }

    .error-title {
        font-size: 24px;
    }

    .error-message {
        font-size: 16px;
    }

    .error-actions .el-button {
        margin: 0 5px;
        padding: 10px 20px;
        font-size: 14px;
    }

    .error-illustration {
        max-width: 280px;
    }
}
</style>